<!-- 点餐界面 -->
<template>
	<view class="wanl-goods">
		<!-- 规格 -->
		<view class="cu-modal drawer" :class="modalName == 'option' ? 'show' : ''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="option wanl-modal">
					<view class="head-title">选择规格</view>
					<view class="head text-left padding-bj solid-bottom">
						<view
							class="cu-avatar radius-bock margin-right"
							:style="{ backgroundImage: 'url(' + $wanlshop.oss(selectshop.thumbnail || goodsData.image, 100, 100) + ')' }"
						></view>
						
						<view>
							<view class="text-price wanl-orange text-xxl margin-bottom-xs">{{ selectshop.price || goodsData.interval_price }}</view>
							<view v-if="selectArr.join('')" class="wanl-gray margin-bottom-xs">
								库存 <text class="margin-lr-xs">{{ selectshop.stock || 0 }}</text> 件
							</view>
							<view class="text-sm">
								<view v-if="selectArr.join('')">已选择：{{ selectArr.join(' ') }}</view>
								<view v-else>
									请选择：
									<text v-for="(item, index) in goodsData.spu" :key="item.id">
										<block v-if="index != 0">-</block>
										{{ item.name }}
									</text>
								</view>
							</view>
						</view>
						
						<view class="close wlIcon-31guanbi" @tap="hideModal"></view>
					</view>
					<!-- 1.0.8升级 -->
					<scroll-view scroll-y="true" :style="{maxHeight: wanlsys.screenHeight / 2 + 'px'}">
						<view class="opt text-left padding-bj solid-bottom" v-for="(value, spukey) in goodsData.spu" :key="value.id">
							<view class="text-df">{{ value.name }}</view>
							<view class="tag">
								<view
									class="cu-tag text-sm"
									v-for="(item, index) in value.item"
									:key="index"
									:class="[item.ishow ? '' : 'noactive', subIndex[spukey] == index ? 'active' : '']"
									@tap="skuClick(item, spukey, $event, index)"
								>
									{{ item.name }}
								</view>
							</view>
						</view>
						<view class="number padding-bj">
							<view class="text-df">购买数量</view>
							<uni-number-box :min="1" :max="selectshop.stock" :value="selectNum" :disabled="canCount" @change="changeNum"></uni-number-box>
						</view>
					</scroll-view>
		
					<view class="foot padding-lr-bj">
						<button v-if="isChoice" class="cu-btn bg-gradual-orange round text-bold complete" @tap="completeSelection">完成</button>
						<!-- <block v-else>
							<button class="cu-btn bg-gradual-yellow round-left text-bold" @tap="SubmitData('addToCart', 1)">加入购物车</button>
							<button class="cu-btn bg-gradual-orange round-right text-bold" @tap="SubmitData('placeOrder', 1)">立即订购</button>
						</block> -->
					</view>
				</view>
			</view>
		</view>		
		<view class="headmaindiv">
			<!-- 导航栏 搜索框 标题 -->
			<view class="navigater flex align-center justify-between">
				<view class="search flex align-center round">
					<view class="icon text-df text-bold wanl-gray-dark">
						<text class="wlIcon-sousuo1"></text>
					</view>
					<swiper vertical autoplay circular interval="3000">
						<swiper-item @tap="handleSearch('')">
							<text class="wanl-gray-dark text-cut">搜索 商品、类目</text>
						</swiper-item>
						<swiper-item v-for="(item, index) in common.modulesData.searchModules" :key="item.keywords"
							@tap="handleSearch(item.keywords)">
							<text class="wanl-gray-dark text-cut">{{ item.keywords }}</text>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="headdiv">
				<view class="headbodyimg headbodyHg" v-show="!showAll">
					<view class="img-item" @tap="goto(0)">
						<image src="../static/images/shop/hot@2x.png"></image>
						<text :class="[c_index==0?'active':'']">热门优选</text>
					</view>
					<view class="img-item" v-for="(item,index) in items" :key="index" @tap="goto(index+1)">
						<image :src="ossStc+item.image"></image>
						<text :class="[c_index==index+1?'active':'']">{{item.name}}</text>
					</view>
				</view>
				<view class="modal-box" v-show="showAll" @tap.stop="showAll=!showAll">
					<view class="con-box">
						<view class="headbodytitle">全部分类</view>
						<view class="headbodyimg">
							<view class="img-item" @tap="goto(0)">
								<image src="../static/images/shop/hot@2x.png"></image>
								<text :class="[c_index==0?'active':'']">热门优选</text>
							</view>
							<view class="img-item" v-for="(item,index) in items" :key="index" @tap="goto(index+1)">
								<image :src="ossStc+item.image"></image>
								<text :class="[c_index==index+1?'active':'']">{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="opendiv" @click="showAll=!showAll">
					<text>{{showAll?'收起':'展开'}}</text><image src="../static/images/shop/jt@2x.png"></image>
				</view>
			</view>
		</view>
		<view class="header2">
			<!-- 根据选项卡显示对应的组件内容 -->
				<view class="u-wrap">
						<view class="u-menu-wrap">
				            <!-- 左边菜单 可滚动视图区域 -->
							<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
				             <!-- tap.stop阻止冒泡 -->
								<view v-for="(item,index) in tabbar" :key="index" class='u-tab-item' :class="[current == index ? 'u-tab-item-active' : '']"
								 @tap.stop="swichMenu(index,item)">
				                 <text class="u-line-1">{{item.name}}</text>
				                </view>
							</scroll-view>
				            <!-- 右边菜单 可滚动视图区域 -->
							<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
								<!-- <view class="right-box"  @scroll="rightScroll"> -->
									<view class="class-item">
										
									   <view class="class-item-img" v-if="bannerImg.avatar" :style="{ backgroundImage: 'url(' + $wanlshop.oss(bannerImg.avatar, 0, 50, 1, 'transparent') + ')' }" @tap="onGoods(bannerImg.goods_id)">
									   	</view>
										<view>
											<view class='menuDetailDiv' v-for="(item1, index1) in goodsList" :key="index1" @tap="onGoods(item1.id)" v-show="item1.is_verify=='2'">
				                                <view class='menuDetailDivImg'>
				                                    <image class='menu-img' :src="ossStc+item1.image"></image>
				                                </view>
				                                <view class='menuDetailDivContent'>
				                                    <text class="menuDetailDivContentTitle">{{item1.title}}</text>
				                                    <text class='menuDetailDivContentDetails'>{{item1.description}}</text>
				                                    <view class='menuDetailDivContentDetailsPrice'>
				                                        <view class='menuDetailDivContentDetailsPriceDiv'>
				                                            <view class='presentPrice'><text class="i">￥</text>{{item1.price}}</view>
				                                        </view>
				                                        <view class="addNum">
															 <text class='menuDetailDivContentDetailsoriginalPrice shanchu'>{{item1.comment}}条评价</text>
															<view class='plush' @click.stop="addGoods('addToCart', item1)">
																<image src="../static/images/shop/add@2x.png"></image>
															</view>
				                                        </view>
				                                    </view>
				                                </view>
											</view>
										</view>
									</view>
								<!-- </view> -->
							</scroll-view>
						</view>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			canCount() {
				return this.subIndex.some(item => item === -1);
			},
			...mapState(['cart', 'common'])
		},
		data() {
			return {
				// 选项卡初始位置
				c_index: 0,
				tabbar:[],//存储菜单数组
				items: [],
				showAll:false,
				goodsList:[],
				goodsData:{},
				ossStc:'',
				modalShow: false,
				scrollTop: 0, //tab标题的滚动条位置
				oldScrollTop: 0,
				current: 0, // 预设当前项的值
				arr: [], // 分类的每个高度列表
				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
				oldscrollTop:0,
				timer: null, // 定时器
				totalPrice: 0, // 添加的总价格
				params:{
					search: '',
					sort: 'weigh',
					order: 'asc',
					page: 1,
					filter: {},
					op: {}
				},
				
				// 商品规格组合
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				selectArr: [], //存放被选中的值
				subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				selectshop: {}, //存放最后选中的商品
				selectNum: 1, //选中数量
				isChoice: '', // 是否从选择进入
				showCart:true,
				modalName: null, // 弹出层
				current_page:1,
				last_page:1,
				bannerImg:{
					avatar:'',
					goods_id:0
				},
			}
		},
		onLoad() {
			// 接收url参数
			this.ossStc=this.$store.state.common.appUrl.oss
			this.wanlsys = this.$wanlshop.wanlsys();
			console.log("bannerImg",this.common.modulesData.categoryModules,this.$store.state.common.modulesData.categoryModules)
			
				this.tabbar=[{name:'热门优选'}]
				this.getlikes();
				this.getlikeban();
		    setTimeout(()=>{
				this.items=this.common.modulesData.categoryModules||this.$store.state.common.modulesData.categoryModules
				// console.log("this.items222",this.items)
			},1000)
		},
		methods: {
			...mapActions({
				download: 'update/download', // 立即下载
				ignore: 'update/ignore' // 忽略更新
			}),
			// 返回上一页
			// 点击选项卡的操作
			goto(index) {
				// 改变选项卡位置，为了不同的css效果
				this.c_index = index;
				this.current=0;
				console.log("go____",this.oldscrollTop,document.body.scrollTop);
				this.scrollRightTop=this.oldscrollTop
				this.tabbar=[];
				 if(index===0){
					 this.tabbar=[{name:'热门优选'}]
					 this.getlikes();
					 this.getlikeban();
				 }else{
					if(this.items[this.c_index-1]&&this.items[this.c_index-1].childlist){
						this.tabbar=this.items[this.c_index-1].childlist
						this.getGoods(this.tabbar[0])
						this.getgoodban(this.tabbar[0].id)
					}
				 }
				
			},
			// 搜索
			handleSearch(text) {
				this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, 'fade-in', 100);
			},
			// 点击左边的栏目切换
			async swichMenu(index,item) {
				console.log("swichMenu___",this.oldscrollTop,document.body.scrollTop);
				this.scrollRightTop=this.oldscrollTop
				if (index == this.current) return;
				this.$nextTick(function(){
					this.current = index;
					this.getGoods(item)
					this.getgoodban(item.id)
				})
				
			},
			async getlikes(){
				this.goodsList=[]
				this.$api.get({
					url: '/wanlshop/product/likes',
					data: {
						page: this.current_page
					},
					success: res => {
						this.goodsList=res.data
						// if (type === 'lower') {
						// 	this.dataList = this.dataList.concat(res.data);
						// } else {
						// 	this.dataList = res.data;
						// }
						// this.current_page = res.current_page; //当前页码
						// this.last_page = res.last_page; //总页码
						// // 判断是否还有数据
						// if (res.current_page === res.last_page || res.total === 0) {
						// 	this.status = 'noMore';
						// } else {
						// 	this.status = 'more';
						// }
					}
				});
			},
			async getGoods(data){
				this.goodsList=[]
				this.params.filter.category_id = data.id;
				this.params.op.category_id = 'in';
				this.$api.get({
					url: '/wanlshop/product/lists',
					data: this.params,
					success: res => {
						this.goodsList=res.data
					}
				});
			},
			async getlikeban(){
				this.$api.get({
					url: '/index/bannerInfo',
					success: res => {
						if(res&&res.length>0){
							this.bannerImg=res[1]
							this.bannerImg.avatar=res[1].image
						}
					}
				});
			},
			async getgoodban(id){
				this.$api.get({
					url: '/index/categoryInfo',
					data: {
						category_id:id
					},
					success: res => {
						this.bannerImg=res
					}
				});
			},
			async loadData(option) {
				//加载商品
				this.$api.get({
					url: '/wanlshop/product/goods',
					data: option,
					success: res => {
						// 价格区间
						if (res.sku.length == 0) {
							res.interval_price = res.price;
							res.market_price = res.price;
						}else{
							let price = [],
								market_price = [];
							for (let value of res.sku) {
								price.push(value.price);
								market_price.push(value.market_price);
							}
							let minPrice = Math.min.apply(null, price),
								maxPrice = Math.max.apply(null, price),
								maxMarketPrice = Math.max.apply(null, market_price);
							res.interval_price = minPrice == maxPrice ? Number(minPrice).toFixed(2) : ( minPrice + '-' + Number(maxPrice).toFixed(2) ); //区间价格
							res.market_price = Number(maxMarketPrice).toFixed(2); //最大市场价
						}
						this.goodsData = res;
						// 商品规格组合
						this.goodsData.spu.map(item => {
							this.selectArr.push('');
							this.subIndex.push(-1);
						});
						this.checkItem(); //计算sku里面规格形成路径
						this.checkInpath(-1); //传-1是为了不跳过循环
					}
				});
			},
			async loadStock(sku_id){
				this.$api.get({
					url: '/wanlshop/product/stock',
					data: {
						sku_id: sku_id
					},
					success: res => {
						this.selectshop.stock = res;
						console.log("selectshop",this.selectshop.stock,res,sku_id)
					}
				});
			},
			// 商品规格组合 选择
			skuClick(value, spukey, event, index) {
				console.log("skuClick",value,spukey,event,index)
				if (value.ishow) {
					if (this.selectArr[spukey] != value.name) {
						this.$set(this.selectArr, spukey, value.name);
						this.$set(this.subIndex, spukey, index);
					} else {
						this.$set(this.selectArr, spukey, '');
						this.$set(this.subIndex, spukey, -1);
					}
					this.checkInpath(spukey);
					//如果全部选完
					if (this.selectArr.every(item => item != '')) {
						this.selectshop = this.shopItemInfo[this.selectArr];
						this.loadStock(this.selectshop.id);
						this.selectNum = 1;
					}
				}
			},
			//循环所有属性判断哪些属性可选
			checkInpath(clickIndex) {
				
				//当前选中的兄弟节点和已选中属性不需要循环
				for (let i = 0, len = this.goodsData.spu.length; i < len; i++) {
					if (i == clickIndex) {
						continue;
					}
					let len2 = this.goodsData.spu[i].item.length;
					for (let j = 0; j < len2; j++) {
						if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
							continue;
						}
						let choosed_copy = [...this.selectArr];
						this.$set(choosed_copy, i, this.goodsData.spu[i].item[j].name);
						let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
						if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
							this.$set(this.goodsData.spu[i].item[j], 'ishow', true);
						} else {
							this.$set(this.goodsData.spu[i].item[j], 'ishow', false);
						}
					}
				}
				// console.log(this.goodsData.spu)
			},
			//计算有多小种可选路径
			checkItem() {
				let result = this.goodsData.sku.reduce(
					(arrs, items) => {
						return arrs.concat(
							items.difference.reduce(
								(arr, item) => {
									return arr.concat(
										arr.map(item2 => {
											//利用对象属性的唯一性实现二维数组去重
											if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
												this.shopItemInfo[[...item2, item]] = items;
											}
											return [...item2, item];
										})
									);
								},
								[[]]
							)
						);
					},
					[[]]
				);
			},
			//商品规格修改数量
			changeNum(val) {
				if(this.selectshop.stock){
					let num = parseInt(val);
					if(num > this.selectshop.stock){
						this.$wanlshop.msg(`数量不能超过库存 ${this.selectshop.stock} 件`);
						this.selectNum = parseInt(this.selectshop.stock);
					}else{
						this.selectNum = parseInt(val);
					}
				}
			},
			// 添加数量
			addGoods(name, data){
			    this.selectshop={};
				this.modalName = 'option';
				this.isChoice = name;
				this.shopItemInfo={};//存放要和选中的值进行匹配的数据
				this.selectArr=[]; //存放被选中的值
				this.subIndex=[]; //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				this.selectshop={}; //存放最后选中的商品
				this.selectNum=1; //选中数量
				let option={id:data.id}
				this.loadData(option)
			},
			// 弹出层
			showModal(name) {
				this.isChoice = '';
				this.modalName = name;
			},
			// 关闭弹出层
			hideModal(name) {
				if (name) {
					this.showModal(name);
				} else {
					this.modalName = null;
				}
			},
			// 打开购物车
			toCart() {
				// 提交订单
				uni.switchTab({ url: '/pages/cart' });
			},
			// 提交数据
			SubmitData(name, type) {
				if(type == 1){
					if (this.canCount) {
						this.$wanlshop.msg('请选择完成规格');
					}else{
						this.isChoice = name;
						this.ProcessingData();
					}
				}else{
					this.modalName = 'option';
					this.isChoice = name;
				}
			},
			// 完成选择
			completeSelection() {
				if (this.canCount) {
					this.$wanlshop.msg('请选择完成规格');
				} else {
					this.ProcessingData();
				}
			},
			ProcessingData() {
				if (this.isChoice == 'addToCart') {
					this.$store.dispatch('cart/add', {
						shop_id: this.goodsData.shop_id,
						shop_name: this.goodsData.shop.shopname,
						goods_id: this.goodsData.id,
						title: this.goodsData.title,
						number: this.selectNum,
						image: this.goodsData.image,
						sku: this.selectshop,
						sku_id: this.selectshop.id,
						sum: this.$wanlshop.bcmul(this.selectshop.price, this.selectNum)
					});
					this.$wanlshop.msg('已加购物车');
				} else if (this.isChoice == 'placeOrder') {
					let goodsData = [
						{
							goods_id: this.goodsData.id,
							number: this.selectNum,
							sku_id: this.selectshop.id
						}
					];
					// 提交订单
					if (this.$store.state.user.isLogin) {
						uni.redirectTo({
							url: `/pages/user/order/addorder?order_type=groups&data=${JSON.stringify(goodsData)}`
						});
					}else{
						this.$wanlshop.to('/pages/user/auth/auth');
					}
					
				} else {
					this.$wanlshop.msg('数据异常');
				}
				this.hideModal();
			},
		    async rightScroll(e) {
				// console.log("222",e.detail.scrollTop)
				this.oldscrollTop = e.detail.scrollTop;
			}
		}
	}
</script>

<style lang="scss">
	.wanl-goods {
		width: 100%;
		background: #F5F5F5 ;
	}
    .head-title{
		position: absolute;
		top: 12px;
		left: calc(50% - 70px);
		width: 140px;
		text-align: center;
		font-size: 36upx;
		font-weight: 550;
	}
	.cu-dialog{
		border-radius: 8px;
		width: 300px;
		padding: 8px 5px 10px;
	}
	.wanl-modal.option .head .cu-avatar {
		width: 200rpx;
		height: 200rpx!important;
		border: radius 0!important;
	}
	.wanl-modal.option .head{padding-top: 100rpx!important;}
	.headmaindiv {
		width: 100%;
		background: #E3F3E6;
		box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
		border-radius: 0px 0px 24upx 24upx;
		padding-top: 20rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}

	.navigater {
		border: 1px solid #8BBDA0;
		background: #ffffff;
		border-radius: 50rpx;
		height: 86rpx;
		padding: 0 25rpx;
		margin: 0 40rpx 10rpx;
		/* #ifdef MP */
		padding-right: 220rpx;

		/* #endif */
		.search {
			flex: 1;
			background-color: #fff;
			height: 66rpx;
			border: 2rpx solid #fff;

			.icon {
				margin: 0 20rpx;
			}

			swiper {
				height: 100%;
				width: 100%;
				margin-right: 10rpx;

				swiper-item {
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.headdiv {
		.headbodyHg{
			height: 240rpx;
		}
		.headbodyimg {
			position: relative;
			display: flex;
			align-items: center;
			padding:0 20rpx;
            flex-wrap: wrap;
			overflow: hidden;
			.img-item {
				width: 20%;
				padding: 0 10upx;
				text-align: center;
				margin-bottom:10rpx;
				image {
					width: 136upx;
					height: 126upx;
					border-radius: 16px;
					padding: 2px;
				}
				text {
					margin: 5rpx 0;
					font-size: 24upx;
					display: block;
				}
			}
			.img-item:first-child image{
				padding: 0!important;
				margin-right: -2px;
			}

		}

		.opendiv {
			position: absolute;
			right: 0;
			z-index: 12;
			top: 150rpx;
			width: 70rpx;
			padding: 20rpx 0;
			background: #FFFFFF;
			box-shadow: -4px -3px 13px 0px rgba(39, 6, 3, 0.3);
			opacity: 0.6;
			border-radius: 8px 0px 0px 8px;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			display: flex;
			text {
				display: block;
				width: 24rpx;
				margin: 0 auto;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
			    line-height: 24rpx;
				letter-spacing: 10rpx;
			}
			image{
				width: 20rpx;
				height: 12rpx;
				margin-top: 10rpx;
			}
		}
	    .modal-box{
			position: fixed;
			top: 106rpx;
			background: rgba(0, 0, 0, 0.3);
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 11;
			.con-box{
				width: 100%;
				padding-bottom: 20rpx;
				background: #E3F3E6;
				border-radius: 0px 0px 24upx 24upx;
				.headbodytitle{
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #4C4C4C;
					padding: 49upx 28upx 40upx;
				}
			}
		}
	}

	.headbodytext {
		width: 460upx;
		margin-top: 20px;
	}
    .active{
		color: #ffffff;
		background: #FC6704;
		border-radius: 20rpx;
		padding: 0 6rpx;
	}

	.textlength {
		width: 400upx;
		/*父元素设置超过宽度显示...*/
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bodytext {
		/* height: 60px; */
		font-size: 27upx;
		color: #808080;
		margin-right: 20upx;
	}

	.headbodytitle {
		font-size: 35upx;
		font-weight: bold;
		color: black;
	}
	.header2{
		margin-top: 360rpx;
	}
	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}
	
	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}
	
	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}
	
	.u-tab-view {
		width: 180rpx;
		height: 100%;
		position: fixed;
		left: 0;
		  border-right: 10rpx solid #ffffff;
	}
	
	.u-tab-item {
	    position: relative;
		padding: 36rpx 0;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
	}
	
	// 选中以后改变样式
	.u-tab-item-active {
		color: #ffffff;
		text-align: center;
		.u-line-1{
			background: #FC6704;
			border-radius: 20rpx;
			padding: 0 12rpx;
		}
	}
	
	.right-box {
	    background-color: #f5f5f5;
		margin-left: 180rpx;
		height: calc(100vh - 400rpx);
	}
	.class-item {
		margin: 26rpx 20rpx 16px 13rpx;
	}
	.class-item-img{
		flex: 1;
		height: 180upx;
		background-size:100% 100%;
		overflow: hidden;
		margin-bottom: 26rpx;
	}
	// 模仿支付宝上饿了吗的类别吸顶效果
	.item-title {
	    position: sticky;
	    /* #ifdef H5 */
	    top: -1px;
	    /* #endif */
	    /* #ifdef MP-WEIXIN */
	    top: 0;
	    /* #endif */
		font-size: 35upx;
		color: $u-main-color;
		font-weight: bold;
	    background-color: #fff;
	    z-index: 9990;
	    padding: 10px 0 10px 0;
	}
	
	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
	}
	
	.item-container {
		display: flex;
		flex-wrap: wrap;
	}
	
	.thumb-box {
		width: 33.333333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}
	
	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
	}
	
	.db_div {
	    height: 80px;
	    width: 100%;
	    background-color: #fff;
	    position:fixed; 
	    bottom:0;
	    /* 弹出层是10075 */
	    z-index: 10075;
	}
	
	.db_div_show {
	    height: 80px;
	    width: 100%;
	    background-color: #fff;
	    position:fixed; 
	    bottom:0; 
	}
	
	.menuDetailDiv {
	    display: flex;
	    flex-direction: row;
	    margin-bottom: 10px;
	    background: #ffffff;
		border-radius:0 16rpx 16rpx 0;
		box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.1);
	}
	
	.menuDetailDivImg {
	     width: 200rpx;
		 margin-right: 10rpx;
	}
	
	.menu-img {
	    width: 190rpx;
	    height: 170rpx;
	}
	
	.menuDetailDivContent{
	    flex: 1;
	    display: flex;
	    flex-direction: column;
		padding: 14rpx 10rpx 0 0;
		width: 260rpx;
		
	}
	.menuDetailDivContentTitle{
		font-size:30upx;font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/* 超出宽度显示省略号
	 */
	.menuDetailDivContentDetails{
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    font-size: 24upx;
		padding: 18rpx 0;
	    
	}
	
	.menuDetailDivContentDetailsPrice {
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	}
	
	.menuDetailDivContentDetailsPriceDiv {
	    flex-direction: row;
	    align-items: baseline;
	}
	
	.presentPrice {
	    color: #FC6704;
	    font-size:32upx;
		.i{
			font-size:12upx;	
			margin: 0 -5upx;
		}
	}
	
	.menuDetailDivContentDetailsoriginalPrice {
	    font-size: 24upx;
	}
	
	/* 添加删除线 */
	.shanchu {
	    margin-right: 8px;
	}
	
	.addNum{
	    display: flex;
	    position: relative;
	    flex-direction: row;
	    justify-content:center;
	    align-items: center;
	    margin: 0 2rpx;
	}
	
	.plush {
	    width: 42upx;
	    height: 42upx;
	    border-radius: 100%;
	    justify-content:center;
	    align-items: center;
		text-align: center;
		image{
			width: 42upx;
			height: 42upx;
		}
	}
	
</style>
